<template>
	<view>
		<u-navbar :border-bottom="false"></u-navbar>
		<view class="banner u-border-bottom u-p-t-40">
			<u-avatar :src="info.avatar" mode="square" size="180"></u-avatar>
			<view class="u-m-t-50">
				<text class="u-font-44">{{info.name}}{{info.userCount?`(${info.userCount})`:''}}</text>
			</view>
		</view>
		<view class="desc">
			<view class="line text-grey">您是否需要加入该群聊？</view>
			<view class="line text-grey">为维护本平台绿色网络环境，请勿在群内传播违法违规内容。</view>
			<view class="line text-grey">该群聊为用户个人创建，如发现有违规违法内容，大家可在群聊内举报。</view>
		</view>
		<view class="u-flex u-row-center u-m-t-80" v-if="info.isDelete">
			<view class="bg-gray u-p-x-80 u-p-y-20 radius">
				<text class="u-font-36">群聊已解散</text>
			</view>
		</view>
		<view class="u-flex u-row-center u-m-t-80" v-else>
			<view v-if="isIn" class="bg-blue u-p-x-80 u-p-y-20 radius" @tap="tochat()">
				<text class="u-font-36">进入群聊</text>
			</view>
			<view v-else class="bg-blue u-p-x-80 u-p-y-20 radius" @tap="joinGroup()">
				<text class="u-font-36">加入群聊</text>
			</view>
		</view>
		
		<real-dialog v-model="realAsk.show"></real-dialog>
		<vip-dialog v-model="vipAsk.show">
			<text v-if="vipAsk.content" slot="label">{{vipAsk.content}}</text>
		</vip-dialog>
	</view>
</template>

<script>
	import realDialog from "@/components/dialogs/realname/index.vue"
	import vipDialog from "@/components/dialogs/vip/index.vue"
	import { fetchGroupInfo } from '@/api/addr';
	import {isInGroup,fetchFriendsInGroup,joinGroup} from "@/api/group"
	import {mapGetters,mapActions} from "vuex"
	import {get as getStorage,set as setStorage } from "@/utils/storage";
	import { ConversationType } from "@/entity/ConversationType";
	import chat, { msgTypes } from "@/IM/index.js"
	export default {
		components:{
			realDialog,
			vipDialog
		},
		data() {
			return {
				id:'',
				from:'',
				info:{},
				inFriend:[],
				isIn:false,
				realAsk:{
					show:false,
				},
				vipAsk:{
					show:false,
					content:'',
				}
			};
		},
		computed:{
			...mapGetters('user',['userInfo','isReal']),
		},
		onLoad({id,from}) {
			this.id = id
			this.from = from
			this.initInfo()
			this.initIsIn()
			this.initInFriend()
		},
		methods:{
			...mapActions('chat', ['setConversation','sendMessage']),
			...mapActions('addr',['fetchAllgroups']),
			async initInfo(){
				this.info = await fetchGroupInfo(this.id)
			},
			async initIsIn(){
				this.isIn = await isInGroup(this.id)
			},
			async initInFriend(){
				this.inFriend = await fetchFriendsInGroup(this.id)
			},
			realGuard(){
				if(!this.isReal){
					this.realAsk.show = true
					throw new Error('请完成实名认证')
				}
			},
			vipGuard(content){
				if(!this.userInfo.vip){
					
					this.vipAsk.show = true
					this.vipAsk.content = content
					throw new Error('请开通VIP') 
				}
			},
			async joinGroup(){
				if(this.joinGroup.lock){
					throw new Error('正在请求中')
				}
				try{
					this.joinGroup.lock = true
					
					await joinGroup({id:this.id,inviteUserId:this.from})
					this.fetchAllgroups()
					const msg = chat.createMessage({
						chatType:ConversationType.Group,
						groupId:this.id,
						content: `${this.userInfo.userName}加入了群聊`,
						msgType: msgTypes.INFORM,
						extras:{
							rich:`<span user="${this.userInfo.userId}">${this.userInfo.userName}</span>加入了群聊`
						}
					})
					chat.send(msg).then(()=>{
						uni.$emit('chat_receive',this.id,msg)
					})
					this.tochat()
				}finally{
					this.joinGroup.lock = false
				}
			},
			tochat(){
				this.setConversation({
					id:this.id,
					type:ConversationType.Group,
					avatar:this.info.avatar,
					name:this.info.name,
					groupType:this.info.groupType
				})
				uni.redirectTo({
					url:`/pages/room/multi?id=${this.id}`
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #ffffff;
	}
</style>
<style lang="scss" scoped>
	.banner{
		margin: 0 60rpx;
		height: 500rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.desc{
		margin: 80rpx 60rpx 0;
		.line{
			display: flex;
			font-size: 32rpx;
			&:before{
				content: '·';
				margin-right: 0.5em;
				font-weight: bold;
			}
			+.line{
				margin-top: 30rpx;
			}
		}
	}
</style>